<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>学习自codepen：https://codepen.io/Chokcoco/pen/QWMoBGO?editors=1100</title>
	</head>
	<style>
		:root {
			--color-rect: #f9d9e7;
			--color-circle: #f9d9e7;
			--color-notching: #f9d9e7;
			--color-notching2: #f9d9e7;
			--color-parallelogram: #f9d9e7;
		}

		html,
		body {
			width: 100%;
			min-height: 100%;
			font-size: 20px;
			text-align: center;
		}

		#content {
			width: 360px;
			display: flex;
			flex-wrap: wrap;
			flex-direction: column;
			margin: auto;
		}

		.g-multiple {
			width: 400px;
			flex-shrink: 0;
			display: flex;
			flex-wrap: nowrap;
			margin: 0 auto;
		}

		.btn {
			margin: 20px;
			flex-shrink: 0;
			width: 160px;
			height: 64px;
			line-height: 64px;
			text-align: center;
			position: relative;
			cursor: pointer;
			user-select: none;
		}

		.btn:hover {
			top: -1px;
		}

		.btn:active {
			top: 1px;
		}

		.btn.rect {
			background: var(--color-rect);
		}

		.btn.circle {
			border-radius: 64px;
			background: var(--color-circle);
		}

		.btn.parallelogram::before {
			content: "";
			position: absolute;
			top: 0;
			left: -20px;
			bottom: 0;
			right: -20px;
			z-index: -1;
			background: var(--color-parallelogram);
			transform: skewX(15deg);
		}

		.btn.trapezoid::after {
			content: "";
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			transform: perspective(40px) scaleY(1.3) rotateX(10deg);
			transform-origin: bottom;
			background: #ff9800;
			z-index: -1;
		}

		.btn.notching {
			background: linear-gradient(135deg, transparent 10px, #ff1493 0) top left, linear-gradient(-135deg, transparent 10px, #ff1493 0) top right, linear-gradient(-45deg, transparent 10px, #ff1493 0) bottom right, linear-gradient(45deg, transparent 10px, #ff1493 0) bottom left;
			background-size: 50% 50%;
			background-repeat: no-repeat;
		}

		.btn.diamond {
			background: linear-gradient(135deg, transparent 22px, #bd1493 0) top left, linear-gradient(-135deg, transparent 22px, #bd1493 0) top right, linear-gradient(-45deg, transparent 22px, #bd1493 0) bottom right, linear-gradient(45deg, transparent 22px, #bd1493 0) bottom left;
			background-size: 50% 50%;
			background-repeat: no-repeat;
		}

		.btn.clip-notching {
			background: linear-gradient(45deg, #f9d9e7, #ff1493);
			clip-path: polygon(15px 0, calc(100% - 15px) 0, 100% 15px, 100% calc(100% - 15px), calc(100% - 15px) 100%, 15px 100%, 0 calc(100% - 15px), 0 15px);
		}

		.btn.arrow {
			background: linear-gradient(-135deg, transparent 22px, #04e6fb 22px, #9006fb 100%) top right, linear-gradient(-45deg, transparent 22px, #04e6fb 22px, #9006fb 100%) bottom right;
			background-size: 100% 50%;
			background-repeat: no-repeat;
		}

		.btn.two-arrow {
			background: linear-gradient(-135deg, transparent 22%, #04e6fb 22%, #9006fb 78%, transparent 0) top right, linear-gradient(-45deg, transparent 22%, #04e6fb 22%, #9006fb 78%, transparent 0) bottom right;
			background-size: 100% 50%;
			background-repeat: no-repeat;
		}

		.btn.clip-arrow {
			background: linear-gradient(45deg, #04e6fb, #65ff9a);
			clip-path: polygon(0 0, 30px 50%, 0 100%, calc(100% - 30px) 100%, 100% 50%, calc(100% - 30px) 0);
		}

		.btn.inset-circle {
			background-size: 70% 70%;
			background-image: radial-gradient(circle at 100% 100%, transparent 0, transparent 12px, #2179f5 13px), radial-gradient(circle at 0 0, transparent 0, transparent 12px, #2179f5 13px), radial-gradient(circle at 100% 0, transparent 0, transparent 12px, #2179f5 13px), radial-gradient(circle at 0 100%, transparent 0, transparent 12px, #2179f5 13px);
			background-repeat: no-repeat;
			background-position: right bottom, left top, right top, left bottom;
		}

		.btn.mask-inset-circle {
			background: linear-gradient(45deg, #2179f5, #e91e63);
			mask: radial-gradient(circle at 100% 100%, transparent 0, transparent 12px, #2179f5 13px), radial-gradient(circle at 0 0, transparent 0, transparent 12px, #2179f5 13px), radial-gradient(circle at 100% 0, transparent 0, transparent 12px, #2179f5 13px), radial-gradient(circle at 0 100%, transparent 0, transparent 12px, #2179f5 13px);
			mask-repeat: no-repeat;
			mask-position: right bottom, left top, right top, left bottom;
			mask-size: 70% 70%;
		}

		.btn.skew {
			position: relative;
			width: 120px;
			text-indent: 10px;
		}

		.btn.skew::after {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: orange;
			transform: skewX(15deg);
			border-radius: 10px;
			z-index: -1;
		}

		.btn.skew::before {
			content: "";
			position: absolute;
			top: 0;
			right: -13px;
			width: 100px;
			height: 64px;
			border-radius: 10px;
			background: orange;
			z-index: -1;
		}

		.btn.skew2 {
			width: 120px;
			position: relative;
		}

		.btn.skew2::after {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: linear-gradient(90deg, orange, #ff1800);
			transform: skewX(15deg);
			border-radius: 10px;
			z-index: -1;
		}

		.btn.skew2::before {
			content: "";
			position: absolute;
			top: 0;
			left: -13px;
			width: 100px;
			height: 64px;
			border-radius: 10px;
			background: orange;
			z-index: -1;
		}

		.btn.outside-circle {
			position: relative;
			background: #e91e63;
			border-radius: 10px 10px 0 0;
		}

		.btn.outside-circle::before {
			content: "";
			position: absolute;
			width: 20px;
			height: 20px;
			left: -20px;
			bottom: 0;
			background: #aaaa7f;
			background: radial-gradient(circle at 0 0, transparent 20px, #e91e63 21px);
		}

		.btn.outside-circle::after {
			content: "";
			position: absolute;
			width: 20px;
			height: 20px;
			right: -20px;
			bottom: 0;
			background: #aaaa7f;
			background: radial-gradient(circle at 100% 0, transparent 20px, #e91e63 21px);
		}

		
	</style>
	<body>
		<div id='content'>
			<div class="g-multiple">
				<div class='btn rect'>rect</div>
				<div class='btn circle'>circle</div>
			</div>
			<div class="g-multiple">
				<div class='btn parallelogram'>Parallelogram</div>
				<div class='btn trapezoid'>Trapezoid</div>
			</div>
			<div class="g-multiple">
				<div class="btn notching">notching</div>
				<div class="btn clip-notching">notching</div>
				<div class="btn diamond">Diamond</div>
			</div>
			<div class="g-multiple">
				<div class="btn arrow">arrow</div>
				<div class="btn two-arrow">arrow</div>
				<div class="btn clip-arrow">arrow</div>
			</div>
			<div class="g-multiple">
				<div class="btn inset-circle">inset-circle</div>
				<div class="btn mask-inset-circle">inset-circle</div>
			</div>
			<div class="g-multiple">
				<div class="btn skew">Skew</div>
				<div class="btn skew2">Skew</div>
			</div>
			<div class="g-multiple">
				<div class="btn outside-circle">outside-circle</div>
			</div>
		</div>
	</body>
</html>
